<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>VUE监听属性</title>
        <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            X坐标：<input v-model="x"/>，Y坐标<input v-model="y"/><br/>
            <p>({{x}},{{y}})</p>
            <button @click="reset()">重置</button>
        </div>
    </body>
    <script type="text/javascript">
        var vueObj = new Vue({
            el: '#app',
            data: {
                x: '',
                y: ''
            },
            methods: {
                reset: function() {
                    this.x = 100;
                    this.y = 200;
                    console.log("reset方法执行完毕");
                }
            },
            watch: {
                x: function(value) {
                    console.log("修改了x的值");
                    this.x = value;
                },
                y: function(value) {
                    console.log("修改了y的值")
                    this.y = value;
                }
            }
        });

        vueObj.$watch('x', function(newValue, oldValue) {
            console.log("X坐标值【旧：" + oldValue + ", 新：" + newValue + "】");
        });
        vueObj.$watch('y', function(newValue, oldValue) {
            console.log("Y坐标值【旧：" + oldValue + ", 新：" + newValue + "】");
        });
    </script>
</html>